<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  	<title>Canvas Shell</title>
  	<!-- A QUICK AND DIRTY SHELL FOR EXPERIMENTING WITH CANVAS -->
  	<script src="../vendor/prototype.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="file:///Users/Caged/Sites/prototype/plastik/lib/color.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  	<script src="../src/canvaslab.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  	<script src="../src/quaternion.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  	<script src="../src/line.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  	<script src="../src/node.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  	<script src="../src/polygon.js" type="text/javascript" language="javascript" charset="utf-8"></script>
  	
    <script type="text/javascript" language="javascript" charset="utf-8">
    
     function log(msg) {
        $('debug').value += msg;
      }
      
      function __init() {
        canvas = $('mycanvas')
        context = canvas.getContext('2d');
        makeGrid();
        Color = Plastik.Color.Color;
        
      }
    
      function makeGrid() {
        var grid = $('grid');
        var width = parseInt(grid.getStyle('width'));
        var height = parseInt(grid.getStyle('height'));
        
        [width, height].each(function(prop, index) {
          var top = index == 0 ? true : false;
          (prop/10).times(function(num) {
            var div = document.createElement('div');
            div.addClassName('tick-' + (top ? 'top' : 'left'));
            if(top) div.setStyle({left: 10 * num + 'px'});
            if(!top) div.setStyle({top: 10 * num + 'px'});
            var glyph = top ? '|' : '&mdash;'
            if(!(num % 2)) div.innerHTML = 10 * num + ' <span>' + glyph + '</span>';
            grid.appendChild(div);
          });
        });
        
        var xLabel = document.createElement('div');
        xLabel.innerHTML = 'X';
        xLabel.addClassName('xlbl');
        grid.appendChild(xLabel);
        
        var yLabel = document.createElement('div');
        yLabel.innerHTML = 'Y';
        yLabel.addClassName('ylbl');
        grid.appendChild(yLabel);
        
        var coords = document.createElement('div');
        coords.setStyle({width: '50px', position: 'absolute'});
        coords.addClassName('coords');
        grid.appendChild(coords);
        
        Event.observe(canvas, 'mousemove', function(e) {
          var x = (Event.pointerX(e) - 35);
          var y = (Event.pointerY(e) - 54);
          coords.innerHTML =  'x: ' + x + '<br /> y: ' + y;
        });
      }
      
      function make() {
        try {
          eval($F('shell'));
        } catch(e) {
          log(e.toString());
        }
      }

    
    
      function drawCanvas() {
        
        var canvas = $('mycanvas');
        var context = canvas.getContext('2d');
        
        context.lineWidth = 4;
        
        context.save();
        context.translate(0, -10);
        var amount = Math.max((canvas.width / 6));
        context.strokeStyle = Color.fromHexString('#eee').toRGBString();
        amount.times(function(i) {
          context.beginPath();
          context.moveTo(20 * i, 0);
          context.lineTo(0, 20 * i);          
          context.stroke();
        });
        
      }
      
      
      function draw() {
        var ctx = document.getElementById('mycanvas').getContext('2d');
        ctx.translate(75,75);

        for (i=1;i<6;i++){ // Loop through rings (from inside to out)
          ctx.save();
          ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

          for (j=0;j<i*6;j++){ // draw individual dots
            ctx.rotate(Math.PI*2/(i*6));
            ctx.beginPath();
            ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
            ctx.fill();
          }

          ctx.restore();
        }
      }
      
      Object.extend(Math, {
        toRadians: function(degrees) {
         var rad = parseInt(degrees) * (Math.PI/180);
         log('RAD: ' + rad + "\n");
         return rad;
        },
        
        reflectAxis: function(x, y, degrees) {
          var newX = (Math.cos(Math.toRadians(degrees)) * x) - (Math.sin(Math.toRadians(degrees)) * y); 
          var newY = (Math.sin(Math.toRadians(degrees)) * x) - (Math.cos(Math.toRadians(degrees)) * y);
          return [Math.round(newX), Math.round(newY)]; 
        }
      });


      
    </script>
    
    <style type="text/css" media="screen">
    /* <![CDATA[ */
    body {
      font: 1em/1.4em "Lucida Grande", Helvetica, Helvetica, sans-serif;
    }
    
    #main {
      margin-left: 20px;
      font-size: 80%;
    }
    
    #content {
      float: left;
      width: 500px;
      background: #999;
    }
    
      #mycanvas {
        border: 1px dotted #000;
      }
      
      #grid {
        background: #f7f7f7 url('') 50% 50% no-repeat;
        width: 500px;
        height: 500px;
        position: relative;
        padding: 5px;
      }
      
      h1 {
        font-size: 20px;
      }
      
      #inspect {
        margin: 10px 0;
        padding: 5px;
      }
      
      #inspect textarea, #shell {
        width: 100%;
      }
      
      #inspect h3 {
        text-align: center;
        color: #333;
        font-size: 14px;
        padding: 0;
        margin: 0;
      }
      
      .tick-top, .tick-left {
        width: 20px;
        height: 20px;
        position: absolute;
        top: -15px;
        font-size: 8px;
        line-height: 100%;
        text-align: center;
      }
      
      .tick-left {
        left: -25px;
        width: 40px;
        vertical-align: middle;
      }
      
      .tick-left span {
        
      }
      
      .tick-top span {
        display: block;
      }
      
      .xlbl, .ylbl {
        width: 10px;
        height: 10px;
        position: absolute;
      }
      
      .xlbl {
        left: 10px;
        top: 250px;
      }
      
      .ylbl {
        left: 260px;
        top: 490px;
      }
      
      .coords {
        font-size: 9px;
        background: #ffe;
      }
      
      #sbar {
        margin-left: 540px;
        padding: 1px;
      }
      
      textarea {
        font-family: Monaco, Courier, "Corier New", fixed;
        font-size: 85%;
      }
    /* ]]> */
    </style>
    
  </head>
  <body onload="__init()">
    <!-- begin div.header -->
    <div id="header">
      
    </div>
    <!-- /end div.header -->
    
    <!-- begin div.nav -->
    <div id="nav"></div>
    <!-- /end div.nav -->
    
    
    <!-- begin div.main -->
    <div id="main">
      <h1>Canvas Shell</h1>
      <div id="content">
        <div id="grid"><canvas id="mycanvas" width="500" height="500"> </canvas></div>
      </div>
      
      <div id="sbar">
        <textarea rows="25" cols="55" id="shell">
context.clearRect(0,0,500,500);
context.globalAlpha = '0.5';
context.beginPath();
origin = new Object();
origin.x = 150;
origin.y = 150;

focalLength = 50;
MakeA3DPoint = function(x,y,z){
	var point = new Object();
	point.x = x;
	point.y = y;
	point.z = z;
	return point;
};

ConvertPointIn3DToPointIn2D = function(pointIn3D){
	var pointIn2D = new Object();
	var scaleRatio = focalLength/(focalLength + pointIn3D.z);
	pointIn2D.x = pointIn3D.x * scaleRatio;
	pointIn2D.y = pointIn3D.y * scaleRatio;
	return pointIn2D;
};

pointsArray = [
	MakeA3DPoint(-20, -40, -20),
	MakeA3DPoint(20, -40, -20),
	MakeA3DPoint(20, -40, 20),
	MakeA3DPoint(-20, -40, 20),
	MakeA3DPoint(-20, 80, -20),
	MakeA3DPoint(20, 80, -20),
	MakeA3DPoint(20, 80, 20),
	MakeA3DPoint(-20, 80, 20)
];

direction = "left";
speed = 5;

backAndForthAndSideToSide = function(){
context.clearRect(0,0,500,500);
	var screenPoints = new Array();
	for (var i=0; i < pointsArray.length; i++){
		var thisPoint = pointsArray[i];		
		if (direction == "left"){
			thisPoint.x -= speed;
			if (i == pointsArray.length-1 && thisPoint.x <= -100) direction = "backward";
		}else if (direction == "backward"){
			thisPoint.z += speed;
			if (i == pointsArray.length-1 && thisPoint.z >= 150) direction = "right";
		}else if (direction == "right"){
			thisPoint.x += speed;
			if (i == pointsArray.length-1 && thisPoint.x >= 60) direction = "forward";
		}else if (direction == "forward"){
			thisPoint.z -= speed;
			if (i == pointsArray.length-1 && thisPoint.z <= 0) direction = "left";
		}
		screenPoints[i] = ConvertPointIn3DToPointIn2D(thisPoint);
		screenPoints[i].x += origin.x;
		screenPoints[i].y += origin.y;
	}


context.moveTo(screenPoints[0].x, screenPoints[0].y);
context.lineTo(screenPoints[1].x, screenPoints[1].y);
context.lineTo(screenPoints[2].x, screenPoints[2].y);
context.lineTo(screenPoints[3].x, screenPoints[3].y);
context.lineTo(screenPoints[0].x, screenPoints[0].y);



context.moveTo(screenPoints[4].x, screenPoints[4].y);
context.lineTo(screenPoints[5].x, screenPoints[5].y);
context.lineTo(screenPoints[6].x, screenPoints[6].y);
context.lineTo(screenPoints[7].x, screenPoints[7].y);
context.lineTo(screenPoints[4].x, screenPoints[4].y);


context.moveTo(screenPoints[0].x, screenPoints[0].y);
context.lineTo(screenPoints[4].x, screenPoints[4].y);


context.moveTo(screenPoints[1].x, screenPoints[1].y);
context.lineTo(screenPoints[5].x, screenPoints[5].y);


context.moveTo(screenPoints[2].x, screenPoints[2].y);
context.lineTo(screenPoints[6].x, screenPoints[6].y);


context.moveTo(screenPoints[3].x, screenPoints[3].y);
context.lineTo(screenPoints[7].x, screenPoints[7].y);
context.stroke();
};

setInterval("backAndForthAndSideToSide()", 30);

        </textarea><br />
        <input type="submit" value="Draw This" onclick="$('debug').value = ''; make();" />
        <div id="inspect">
          <h3>Debug</h3>
          <p>Use <code>log(<em>msg</em>)</code> from shell</p>
          <textarea name="debug" id="debug" rows="10" cols="40"> 
            
          </textarea>
          <p><input type="submit" value="Clear" onclick="$('debug').value = '';"></p>
        </div>
      </div>
      
    </div>
    <!-- /end div.main -->
    
    <!-- begin div.footer -->
    <div id="footer"></div>
    <!-- /end div.footer -->
    <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
      // drawCanvas();
/*      try {
      var canvas = $('mycanvas');
      var context = canvas.getContext('2d');
      context.translate(210, 110);
      context.globalAlpha = 0.3;
      context.beginPath();
      var n0 = new CanvasLab.Node(-47,20,0);
      var n1 = new CanvasLab.Node(-50,20,15);
      var n2 = new CanvasLab.Node(50,20,15);
      var n3 = new CanvasLab.Node(47,20,0);
      var p = new CanvasLab.Polygon(context);
      p.addNode(n0);
      p.addNode(n1);
      p.addNode(n2);
      p.addNode(n3);
      
      p.draw();
      context.stroke();
    } catch(e) {
      log(e.toString());
    }*/
    // ]]>
    </script>
  </body>
</html>
